<template>
  <el-container v-loading="loading">
    <el-main>
      <el-form :model="form.model" :rules="form.rules" ref="formRef" label-width="120px">
        <el-form-item label="选择客服分类" prop="room_id">
          <el-cascader
            v-model="form.model.room_id"
            :options="roomIdSelect"
            :props="{
              label: 'name',
              value: 'value',
              checkStrictly: true,
              emitPath: false,
            }"
            clearable
            placeholder="请选择"
            @change="changeRoom"
          >
          </el-cascader>
        </el-form-item>
        <el-form-item label="所属管理员" prop="auth_id" v-if="form.model.room_id">
          <el-cascader
            v-model="form.model.auth_id"
            :options="controllerSelect"
            :props="{
              label: 'nickname',
              value: 'id',
              checkStrictly: true,
              emitPath: false,
            }"
            clearable
            placeholder="请选择"
          >
          </el-cascader>
        </el-form-item>
        <el-form-item label="客服头像" prop="avatar">
          <sa-uploader v-model="form.model.avatar" fileType="image"></sa-uploader>
        </el-form-item>
        <el-form-item label="客服名称" prop="name">
          <el-input v-model="form.model.name" placeholder="请输入客服名称"></el-input>
        </el-form-item>
        <el-form-item label="最优接待人数">
          <el-input
            v-model="form.model.max_num"
            placeholder="请输入最优接待人数"
            type="number"
          ></el-input>
        </el-form-item>
        <el-form-item label="权重">
          <el-input v-model="form.model.weigh" placeholder="请输入权重" type="number"></el-input>
        </el-form-item>
      </el-form>
    </el-main>
    <el-footer class="sa-footer--submit">
      <el-button
        v-if="modal.params.type == 'add'"
        v-auth="'chat.admin.customerservice.add'"
        type="primary"
        @click="confirm"
        >保存</el-button
      >
      <el-button
        v-if="modal.params.type == 'edit'"
        v-auth="'chat.admin.customerservice.edit'"
        type="primary"
        @click="confirm"
        >更新</el-button
      >
    </el-footer>
  </el-container>
</template>

<script setup>
  import { toRefs } from '@vueuse/shared';
  import { onMounted, reactive, ref, unref } from 'vue';
  import chatApi from '@/app/chat/api';
  import { cloneDeep } from 'lodash';

  const emit = defineEmits(['modalCallBack']);
  const props = defineProps({
    modal: {
      type: Object,
    },
  });

  // 添加 编辑 form
  let formRef = ref(null);
  const form = reactive({
    model: {
      room_id: 0,
      name: '',
      weigh: 0,
      avatar: '',
      auth: 'admin',
    },
    rules: {
      room_id: [
        {
          required: true,
          message: '请选择选择客服分类',
          trigger: ['blur', 'change'],
        },
      ],
      auth_id: [
        {
          required: true,
          message: '请选择所属管理员',
          trigger: ['blur', 'change'],
        },
      ],
      name: [
        {
          required: true,
          message: '请输入客服昵称',
          trigger: ['blur', 'change'],
        },
      ],
      avatar: [
        {
          required: true,
          message: '请上传客服头像',
          trigger: ['blur', 'change'],
        },
      ],
    },
  });

  const loading = ref(false);
  // 富文本显隐
  const showEditor = ref(false);
  const state = reactive({
    controllerSelect: [],
  });

  // 获取详情
  async function getDetail(id) {
    loading.value = true;
    const { error, data } = await chatApi.admin.customerService.detail(id);
    if (error === 0) {
      form.model = { ...form.model, ...data };
      form.model.auth_id = data.customer_service_user.auth_id;
    }
    showEditor.value = true;
    loading.value = false;
  }

  // 选择分类
  const changeRoom = () => {
    getControllerSelect();
  };

  // 所属分类选项
  let roomIdSelect = ref([]);
  async function getChatCofig() {
    const { error, data } = await chatApi.chatInit();
    if (error === 0) {
      roomIdSelect.value = data.default_rooms;
    }
  }

  // 所属管理员列表
  const getControllerSelect = async () => {
    ({ data: state.controllerSelect } = await chatApi.admin.customerService.select({
      id: props.modal.params.id,
      room_id: form.model.room_id,
    }));
  };

  // 表单关闭时提交
  function confirm() {
    // 表单验证
    unref(formRef).validate(async (valid) => {
      if (!valid) return;
      let submitForm = cloneDeep(form.model);
      let { error } =
        props.modal.params.type == 'add'
          ? await chatApi.admin.customerService.add(submitForm)
          : await chatApi.admin.customerService.edit(props.modal.params.id, submitForm);
      error == 0 && emit('modalCallBack', { event: 'confirm' });
    });
  }

  const { controllerSelect } = toRefs(state);

  onMounted(async () => {
    await getChatCofig();
    if (props.modal.params.type == 'edit') {
      await getDetail(props.modal.params.id);
      getControllerSelect();
    }
  });
</script>
<style lang="scss" scoped>
  .style-wrap {
    width: 100%;
    .style-font {
      padding-right: 24px;
      flex: 1;
    }
  }
  .images-item {
    margin: 0 8px 8px 0;
  }
  .tag-item {
    margin: 0 8px 8px 0;
  }
</style>
